<template>
    <div>
        <el-row :gutter='20'>
            <el-col :span='7'>
                <me-link></me-link>
                <me-notice></me-notice>
            </el-col>
            <el-col :span='17' class='box-newses-02'>
                <me-title :title='title'></me-title>
                <br>
                <div class='box-news-02'>
                    <el-tabs type="border-card">
                        <el-tab-pane label="新闻">
                            <ul class='list-news'>
                                <li v-for='item in list'>
                                    <a :href="getNewsUrl(item)">
                                        {{item.title_sim}}
                                        <span class='date'>{{item.created_at}}</span>
                                    </a>
                                </li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="活动">
                            <ul class='list-news'>
                                <li v-for='item in list'>
                                    <a :href="getNewsUrl(item)">
                                        {{item.title_sim}}
                                        <span class='date'>{{item.created_at}}</span>
                                    </a>
                                </li>
                            </ul>
                        </el-tab-pane>
                        <el-tab-pane label="公告">
                            <ul class='list-news'>
                                <li v-for='item in list'>
                                    <a :href="getNewsUrl(item)">
                                        {{item.title_sim}}
                                        <span class='date'>{{item.created_at}}</span>
                                    </a>
                                </li>
                            </ul>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script type="text/javascript">
    import Link from '@/components/utils/Link'
    import Notice from '@/components/utils/Notice'
    import Title from '@/components/utils/Title'
    import Request from '@/common/Request'
    import ScrollReveal from 'scrollreveal'

    export default {
        components: {
            'me-link': Link,
            'me-notice': Notice,
            'me-title': Title
        },
        data: function () {
            return {
                'title': {
                    'name': '新闻资讯',
                    'sub': 'NEWS',
                    'posi': '位置 > ',
                    'now': '资讯',
                    'icon': '/static/image/data/icon-title.png'
                },
                'list': []
            }
        },
        methods: {
            //列表获取
            getList: function (page) {
                var page = page || 1
                var url = Request.createApi('/app/news/list')
                Request.get(url, res => {
                    this.list = res.list
                })
            },
            getNewsUrl: function (news) {
                return'/#/news/item?id=' + news.id;
            },
        },
        created: function () {
            this.getList()
        },
        mounted: function () {
            var sr = ScrollReveal({
                'origin': 'bottom',
                'distance': '20px',
                'duration': 500,
                'delay': 400
            })

            sr.reveal('.box-newses-02')
        }
    }
</script>